import { createStore, combineReducers, applyMiddleware } from 'redux'
// combineReducers 合并多个小的reducer为一个大的reducer
// applyMiddleware 中间件
// 在安装好了浏览器中的redux-devtools插件后，有此库就可以在浏览器中调试了
import { composeWithDevTools } from '@redux-devtools/extension'

// 中间件
// redux-actionCreator日志打印
import logger from 'redux-logger'
// 在redux中写异步
import thunk from 'redux-thunk'

// import num from './modules/num'
// import film from './modules/film'

// vite import.meta.glob   自动检索对应目录下面的指定文件并且导入进来
// webpack require.context 自动检索对应目录下面的指定文件并且导入进来

// 参数1：指定要检索的目录相对路径
// 参数2：指定目录是否要进行递归检索，一般为false不进行递归检索，true是
// 参数3：指定目录下面要检索出来需要的文件类型，正则
// 返回值是一个函数，函数的功能就是导入函数  require import是一样的
const requireFn = require.context('./modules', false, /\.js$/i)
let modules = {}
requireFn.keys().forEach(filePath => {
  const key = filePath.match(/\.\/(\w+)\.js/i)[1]
  const value = requireFn(filePath).default
  modules[key] = value
})

// combineReducers它里面对象中的key只对state有命名空间限制，对dispatch没有的
// redux中没有强制命名空间一说，只能在起dispatch中的type名称是不要有重名，要保持唯一
// const reducer = combineReducers({
//   // key:value
//   // key 模块的名称,state命名空间名称
//   // value 模块的值
//   num,
//   film
// })
const reducer = combineReducers(modules)

// log中间件，打印每次dispatch的action对象
// 自定义一个中间件
/* const log =
  ({ getState, dispatch }) =>
  next =>
  action => {
    console.log('actionCreator：', action)
    next(action)
  } */

// const log =
//   ({ getState, dispatch }) =>
//   next =>
//   action => {
//     console.log('actionCreator：', next, action)
//     if (typeof action === 'function') {
//       action(next, getState)
//       return
//     }
//     next(action)
//   }

// const store = createStore(reducer, composeWithDevTools(applyMiddleware(log)))
// const store = createStore(reducer, composeWithDevTools(applyMiddleware(logger, thunk)))
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

export default store
